<template>
  <div>
    <a-modal
      v-model="visible"
      title="邀请协办组织"
      :maskClosable="false"
      :width="800"
      centered
      :okText="`下一步(${checkedList.length})`"
      @ok="nextStep"
    >
      <a-alert
        message="只能从已合作活动资源推送的组织之中选择邀请；
        需要新增合作组织请前往小程序【我的】-【我的管理】-【合作管理】页面，建立活动资源合作之后再邀请。
        为了避免影响协办组织相关数据，活动一旦与其他组织合作将不可删除本活动数据，请知悉！"
        banner
      />

      <div class="disFlxJS _mt-5">
        <div class="leftBox">
          <div class="fixedTop">
            <div class="disFlxJS linh-40">
              <div>可合作组织</div>
              <div>{{ checkedList.length }}/{{ total }}</div>
            </div>
            <a-input-search
              v-model="queryParam.keyWord"
              size="small"
              class="_mt-5 _mb-10"
              placeholder="搜索组织名称"
              @search="refresh"
            />
          </div>
          <div class="_pl-12 _pr-12" style="flex:1;">
            <div v-for="item in unList" :key="item.tenantId" class="linh-40">
              <a-checkbox v-model="item.checked" @change="handChange(item)">
                <div class="disFlxAC">
                  <img :src="item.logo" style="width: 24px;height: 24px;" alt="" class="_mr-5 flexS0" />
                  <span class="ov-1" style="flex:1;">
                    {{ item.orgName }}
                  </span>
                </div>
              </a-checkbox>
            </div>
          </div>
          <div class="fixedBottom">
            <div class="disFlxJS _pt-5 _pb-5 _pl-12 _pr-12">
              <a-checkbox
                :checked="!!isPageCheckedNum && isPageCheckedNum === unList.length"
                :indeterminate="!!isPageCheckedNum && isPageCheckedNum !== unList.length"
                @change="handChangeAll"
              >
                当前页全选
              </a-checkbox>
              <a-pagination
                size="small"
                simple
                :current="queryParam.current"
                :pageSize="queryParam.pageSize"
                :total="total"
                @change="changePagination"
                @showSizeChange="changePagination"
              />
            </div>
          </div>
        </div>

        <div>({{ checkedList.length }}/{{ total }})</div>
        <div class="rightBox">
          <div class="fixedTop">
            <div class="disFlxJS linh-40">
              <div>新增合作</div>
              <div>
                <a-tooltip title="清除全部已选">
                  <a-icon type="delete" class="cup _pl-10 _pt-10 _pb-10" @click="handRemove()" />
                </a-tooltip>
              </div>
            </div>
            <a-input-search size="small" class="_mt-5 _mb-10" placeholder="搜索组织名称" @search="handSearch" />
          </div>
          <div class="_pl-12 _pr-12" style="flex:1;">
            <template v-for="item in checkedList">
              <div v-if="!item.hide" :key="item.tenantId" class="linh-40 disFlxJS">
                <div class="disFlxAC">
                  <img :src="item.logo" style="width: 24px;height: 24px;" alt="" class="_mr-5 flexS0" />
                  <span class="ov-1" style="flex:1;">
                    {{ item.orgName }}
                  </span>
                </div>
                <div>
                  <a-button type="link" size="small" @click="showCooperationConfig(item)">
                    合作配置
                  </a-button>
                  <a-button type="link" @click="handRemove(item.tenantId)" size="small">
                    移除
                  </a-button>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </a-modal>

    <a-modal
      v-model="explainVisible"
      title="邀请合作"
      :maskClosable="false"
      :width="500"
      centered
      cancelText="上一步"
      okText="邀请合作"
      @cancel="handCancel"
      @ok="handleOk"
    >
      <a-textarea v-model="applyContent" placeholder="请输入邀请说明" :rows="4" />
    </a-modal>
    <CooperationConfig ref="cooperationConfigRef" @ok="handleCooperationInfo" />
  </div>
</template>

<script>
import { activityPartnerOrgList, activityInvite } from '@/api/activity/activity'
import { uniqBy, differenceBy } from 'lodash-es'
import CooperationConfig from '../CooperationConfig'
export default {
  components: {
    CooperationConfig
  },
  data() {
    return {
      visible: false,
      // 查询参数
      queryParam: {
        current: 1,
        pageSize: 10,
        activityId: undefined,
        keyWord: undefined
      },
      total: 0,
      unList: [],
      checkedList: [], // 已选列表
      isPageCheckedNum: 0, // 当前页选择数量

      explainVisible: false,
      applyContent: '' // 说明
    }
  },
  watch: {
    checkedList(val) {
      this.getIsPageCheckedNum()
    }
  },
  methods: {
    showCooperationConfig(item) {
      this.$refs.cooperationConfigRef.moduleShow(item)
    },
    handleCooperationInfo(data) {
      this.checkedList = this.checkedList.map(item => {
        if (item.tenantId == data.tenantId) {
          return {
            ...item,
            ...data
          }
        }
        return item
      })
    },
    openModal(activityId) {
      this.queryParam.activityId = activityId
      this.visible = true
      this.getList()
    },
    async getList() {
      const { data } = await activityPartnerOrgList(this.queryParam)
      this.unList = data.records.map(item => {
        let isChecked = this.checkedList.find(v => v.tenantId === item.tenantId)
        this.$set(item, 'checked', isChecked ? true : false)
        return item
      })
      this.total = data.total
      this.getIsPageCheckedNum()
    },
    getIsPageCheckedNum() {
      let checkedNum = 0
      for (let i = 0; i < this.unList.length; i++) {
        const item = this.unList[i]
        const checkedObj = this.checkedList.find(v => v.tenantId === item.tenantId)
        this.unList[i].checked = !!checkedObj
        checkedObj && checkedNum++
      }
      this.isPageCheckedNum = checkedNum
    },
    refresh() {
      this.queryParam.current = 1
      this.getList()
    },
    // 分页跳转
    changePagination(page, pageSize) {
      this.queryParam.current = page
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    // 单个勾选操作
    handChange(item) {
      if (item.checked) {
        this.checkedList.push(item)
      } else {
        this.checkedList = this.checkedList.filter(v => v.tenantId !== item.tenantId)
      }
    },
    // 当前页全选操作
    handChangeAll() {
      if (!!this.isPageCheckedNum && this.isPageCheckedNum === this.unList.length) {
        this.checkedList = differenceBy(this.checkedList, this.unList, 'tenantId')
      } else {
        this.checkedList = uniqBy([...this.unList, ...this.checkedList], 'tenantId') // 合并去重
      }
    },
    // 清除已选
    handRemove(tenantId) {
      if (tenantId) {
        this.checkedList = this.checkedList.filter(v => v.tenantId !== tenantId)
      } else {
        this.checkedList = []
      }
    },
    // 搜索已勾选列表
    handSearch(e) {
      this.checkedList.forEach(v => {
        this.$set(v, 'hide', !v.orgName.includes(e))
      })
    },
    // 下一步
    nextStep() {
      if (this.checkedList.length) {
        this.explainVisible = true
      }
    },
    handCancel() {
      this.explainVisible = false
    },
    handleOk() {
      activityInvite({
        activityId: this.queryParam.activityId,
        tenantIdInfos: this.checkedList.map(item => ({
          tenantId: item.tenantId,
          registerLimit: item.registerLimit,
          registerSmsType: item.registerSmsType,
          registerLimitNum: item.registerLimitNum
        })),
        applyContent: this.applyContent
      }).then(() => {
        this.visible = false
        this.explainVisible = false
        this.checkedList = []
        this.$message.success('邀请成功,请耐心等待对方审核')
        this.$emit('refresh')
      })
    }
  }
}
</script>

<style lang="less" scoped>
.leftBox,
.rightBox {
  width: 360px;
  height: 468px;
  position: relative;
  overflow-y: auto;
  border: solid 1px #e5e6eb;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  .fixedTop {
    position: sticky;
    z-index: 99;
    top: 0;
    background-color: #f7f8fa;
    color: #333;
    padding-left: 12px;
    padding-right: 12px;
    flex-shrink: 0;
  }
  .fixedBottom {
    position: sticky;
    z-index: 99;
    bottom: 0;
    border-top: solid 1px #e5e6eb;
    background-color: #fff;
    flex-shrink: 0;
  }
  /deep/ .ant-checkbox-wrapper {
    display: flex;
    align-items: center;
  }
}
</style>
